import React, { history } from "react";
import { Observer } from "mobx-react";
import ReactDOM from "react-dom";
import PubSub from "pubsub-js";

import { Context } from "../../../../../store/MyContext";
import { request_lcx } from "../../../../../services/request";
import http from "../../../../../services/service";

import "antd/dist/antd.css";
import { Table, Button, Modal, Avatar } from "antd";
import DropOption from "../DropOption/DropOption";

// export default function List() {
//   return <div></div>;
// }

// 表格数据 for dead data
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    proId: `${i}`,
    proName: `Edward King ${i}`,
    cost: 9,
    sales: 0,
    address: `London, Park Lane no. ${i}`,
    status: 0,
    salesNum: 9,
  });
}

// 确认模态框
const { confirm } = Modal;
let currentPath = window.location.pathname;

class List extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  };

  // static contextType = Context;

  async componentDidMount() {
    // const { tableData } = this.context;
    // console.log(555, this.context);

    // console.log("context class", this.context);
    // let { searchValue } = this.props;
    //#region
    // this.setState({
    //   data2: [
    //     {
    //       key: 1,
    //       proId: 2,
    //       proName: `Edward King`,
    //       cost: 9,
    //       sales: 0,
    //       address: `London, Park Lane no`,
    //       status: 0,
    //       salesNum: 9,
    //     },
    //   ],
    // });
    //#endregion
    try {
      // let allSets = await this.getAllSets();
      // this.getAllSets();
      // console.log(111, currentPath);
      // if (searchValue) {
      //   this.onSearch();
      //   return;
      // }
    } catch (err) {
      // console.log(999, err);
    }
  }

  //第一次获取数据的方法，成功的
  // request_lcx.get("/getAllPackages").then((response) => {
  //   console.log(response.data);
  // });

  // //获取所有套餐数据
  // getAllSets() {
  //   //封装的axios请求的方法
  //   return http.get("/api1/getAllPackages").then((response) => {
  //     this.setState({
  //       data2: response.data,
  //     });
  //     return response.data;
  //   });
  // }

  //删除点击事件
  onDeleteItem = (id) => {
    const { deleteItem } = this.props;
    deleteItem(id);
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = (selectedRowKeys) => {
    // console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
    this.props.selectOption(selectedRowKeys);
  };

  handleMenuClick = (record, e) => {
    // const { onDeleteItem, onEditItem } = this.props;
    let that = this;
    if (e.key === "1") {
      // onEditItem(record);
      console.log("点击更新");
    } else if (e.key === "2") {
      confirm({
        title: `Are you sure delete this record?`,
        onOk() {
          that.onDeleteItem(record.productId);
          console.log("点击删除", record.productId);
        },
      });
    }
  };

  render() {
    console.log(111, this.props);
    const { loading, selectedRowKeys } = this.state;
    const { tableData } = this.props;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    const columns2 = [
      {
        title: "套餐ID",
        dataIndex: "productId",
      },
      {
        title: "套餐名称",
        dataIndex: "com_proName",
      },
      {
        title: "原价",
        dataIndex: "com_costPrice",
      },
      {
        title: "售价",
        dataIndex: "com_salesPrice",
      },
      {
        title: "适用地区",
        dataIndex: "com_area",
      },
      {
        title: "是否启用",
        dataIndex: "com_status",
      },
      {
        title: "订购数量",
        dataIndex: "com_saleNum",
      },
      {
        title: "操作",
        key: "operation",
        fixed: "right",
        width: "8%",
        render: (text, record) => {
          return (
            <DropOption
              onMenuClick={(e) => this.handleMenuClick(record, e)}
              menuOptions={[
                { key: "1", name: `Update` },
                { key: "2", name: `Delete` },
              ]}
            />
          );
        },
      },
    ];

    return (
      <Observer>
        {() => (
          <div>
            <Table
              rowSelection={rowSelection}
              rowKey='productId'
              columns={columns2}
              dataSource={tableData}
            />
          </div>
        )}
      </Observer>
    );
  }
}
List.contextType = Context;
export default List;
